<template>
  <div v-if="curSession.id&&!isLogin" class="h-full w-full flex flex-col justify-between">
    <div class="p-1 border border-gray-100 dark:border-gray-900 opacity-90">
      <div class="flex justify-between items-center">
        <div>
          <div class="text-lg font-bold">
            {{ curSession.title }}
          </div>
          <div class="text-sm text-gray-500">共{{ curSession.messages.length }}条对话</div>
        </div>
        <div>
          <APIKeyEditModal></APIKeyEditModal>

        </div>
      </div>
    </div>
    <div class="bg w-full rounded-lg overflow-hidden b flex-1 max-w-screen-md mx-auto bg-zinc-100 dark:bg-zinc-900">
      <AiMessageList ref="listRef" :list="curSession.messages"></AiMessageList>
    </div>
    <div v-if="curSession.isReplying" class="text-center mt-5">
      <n-button size="small" secondary type="error" @click="handleStopReply">
        <TextIcon icon="ph:stop-fill" text="停止"></TextIcon>
      </n-button>
    </div>
    <div class="w-full max-w-screen-md mx-auto mt-5 mb-5">
      <AiInput ref="inputRef" @handleSend="handleSend"></AiInput>
    </div>
  </div>
  <div v-else class="h-full flex justify-center items-center">
    <n-empty description="暂无会话"></n-empty>
  </div>
</template>

<script setup lang="ts">
import {storeToRefs} from "pinia";
import {useAiStore} from "@/store/module/ai";
import AiMessageList from "@/components/pc/list/AiMessageList.vue";
import AiInput from "@/components/pc/input/AiInput.vue";
import {onMounted, ref, watch} from "vue";
import TextIcon from "@/components/pc/icon/TextIcon.vue";
import {useUserStore} from "@/store";
import APIKeyEditModal from "@/components/pc/modal/APIKeyEditModal.vue";

const aiStore = useAiStore()
const {curSession} = storeToRefs(aiStore)
const {isLogin} = storeToRefs(useUserStore())

const listRef = ref()
const inputRef = ref()


onMounted(() => {
  if (curSession.value.id && !isLogin.value) {
    doInitRender()
  }
})

watch(() => curSession.value.id, (value, oldValue) => {
  if (value && oldValue) {
    doInitRender()
  }
})


const doInitRender = () => {
  listRef.value.doScrollToBottom()
  inputRef.value.doInputFocus()
}

const handleStopReply = () => {
  aiStore.stopReply()
}

const handleSend = () => {
  listRef.value.doScrollToBottom()
}


defineExpose({
  doInitRender
})

</script>

<style scoped>
:deep(.n-card > .n-card__content:first-child) {
  padding: 5px;
}
</style>